<template>
  <el-form
    ref="queryFormRef"
    :inline="true"
    :model="queryParams"
    class="flex flex-wrap "
    label-width="68px"
    @submit.prevent
  >
    <el-form-item
      v-for="item in props.formItems"
      :label="item.label || item['aria-label']"
      :prop="item.prop"
      class="items"
    >
      <el-input
        v-if="item.type === 'input'"
        v-model="queryParams[item.prop]"
        class="w-240px"
        clearable
        v-bind="item"
        @keyup.enter="onEnterKey"
      />

      <el-select
        v-if="item.type === 'select'"
        v-model="queryParams[item.prop]"
        class="w-240px"
        clearable
        v-bind="item"
      >
        <el-option
          v-for="(itms, index) in item.options"
          :label="item.relabel ? itms[item.relabel] : itms.label"
          :value="item.revalue ? itms[item.revalue] : itms.value"
        />
      </el-select>

      <el-date-picker
        v-if="item.type === 'datepicker'"
        v-model="queryParams[item.prop]"
        :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
        class="w-240px"
        v-bind="item"
        :type="item.dateType || 'daterange'"
        value-format="YYYY-MM-DD HH:mm:ss"
        @clear="handleButtonClick('清除', queryParams, item.prop)"
      />

      <template v-if="item.type === 'buttons'">
       <section>
        <el-button
          v-for="button in item.children"
          @click="handleButtonClick(button.label, queryParams, queryFormRef)"
          :type="button.type"
        >
          <!-- <Icon class="mr-5px" :icon="button.icon" /> -->
          {{ button.label }}
        </el-button>
       </section>
      </template>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
/// <reference types="../node_modules/.vue-global-types/vue_3.4_false.d.ts" />
import type { IformItem } from './type';
const props = defineProps<{ formItems: IformItem[] }>()
const queryParams = reactive<Record<string, any>>({})
const queryFormRef = ref() // 搜索的表单
const emit = defineEmits(['update:queryParams', 'enter-key', 'button-click'])
const onEnterKey = (event: Event) => {
  event.preventDefault() // 阻止默认行为
  emit('enter-key', queryParams)
}
const handleButtonClick = (type: string, params: object, item: any) => {
  emit('button-click', type, params, item)
}
</script>
<style>
.w-240px {
  width: 240px !important;
}
.flex-wrap  {
  flex-wrap: wrap;
}
.items:last-child {
  margin-left: auto;
}
</style>
